<!-- 菜单管理 -->
<div id="menusPage" class="layui-row">
    <div class="layui-col-md12">
        <table class="layui-table" id="menusTable" lay-filter="menusTable"></table>
    </div>
    <div class="layui-col-md12" style="margin: 28px 0 0 0;"></div>
</div>
<script type="text/html" id="state">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use(['form', 'table', 'base', 'treetable'],function () {
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var base = layui.base;
        var treeTable = layui.treetable;

        // 渲染表格
        var renderTable = treeTable.render({
            elem: '#menusTable',
            tree: {
                iconIndex: 1,  // 折叠图标显示在第几列
                idName: 'id',  // 自定义id字段的名称
                pidName: 'parentId',  // 自定义标识是否还有子节点的字段名称
                isPidData: true  // 是否是pid形式数据
            },
            cols: [ 
                {type: 'numbers'},
                {field: 'menuName',  title: '菜单名称'},
                {field: 'menuUrl', title: '菜单路由' },
                {field: 'menuPath', title: '菜单路径'},
                {
                    field: 'menuType', width: 80, align: 'center', templet: function (d) {
                        if (d.isMenu == 2) {
                            return '<span class="layui-badge layui-bg-gray">按钮</span>';
                        }
                        if (d.parentId == -1) {
                            return '<span class="layui-badge layui-bg-blue">目录</span>';
                        } else {
                            return '<span class="layui-badge-rim">菜单</span>';
                        }
                    }, title: '类型'
                },
                {align: 'center',  width:150, fixed:'right', title: '操作', templet: '#state'}
             ],
             reqData: function(data, callback) {
            	 // 在这里写ajax请求，通过callback方法回调数据
                 base.fsAjax('/baseService/menu/laytable' , {}, function (data) {
                     layer.closeAll('loading');
                     if (200 == data.code) {
                    	 callback(data.data);  // 参数是数组类型
                     } else {
                         layer.msg(data.msg, {icon: 2, time: 500});
                     }
                 }, 'POST');
             }
        });

        // 工具条点击事件
        treeTable.on('tool(menusTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'edit') { // 修改
                base.putSessionData('fs_menu', data);
                base.open({
                    title: "编辑菜单",
                    id:"editMenuForm",
                    path: 'menuEdit.html',
                    finish: function () {
                        base.removeSessionData('fs_menu');
                        renderTable.reload();
                    }   
                });
            } else if (layEvent === 'del') {
                layer.confirm('确定要删除菜单：'+data.menuName+' ？', function () {
                    layer.load(2);
                    base.fsAjax('/baseService/menu/logicalDel/'+data.id, {}, function (data) {
                        if (200 == data.code) {
                            renderTable.reload();
                            base.msgSuccess(data.msg);
                        } else {
                            base.msgError(data.msg);
                        }
                    }, 'POST');
                });
            }
        });

        // 搜索按钮点击事件
        $('#menus-btn-search').click(function () {
            var keyword = $('#menus-edit-search').val();
            if (keyword == '') {
            	layer.msg("请输入搜索内容", {icon :5,time:500});
            	return false;
            }

             renderTable.expandAll() ;

             var searchCount=0;

             $('.ew-tree-table').find('tbody tr td').each(
                 function() {
                     var text = $(this).text();
                     if (keyword != ''&& text.indexOf(keyword) >= 0) {
                         $(this).css('background-color','rgba(250,230,160,0.5)');
                         searchCount++;
                     }else{
                         $(this).css('background-color','rgba(255,251,249,0.5)');
                     }

             });

             if(searchCount == 0){
                 layer.msg("无匹配", {icon:4,time:500 });
                 renderTable.foldAll();
             }
        });
    });
</script>